<template>
  <div class="toolbar colorMain">
    <div class="mt-10 mb-10">
      <div class="mt-10 mb-10">
        <line-from-choose @change="change"/>
      </div>
    </div>
    <!--<div><el-button :loading="excelLoad" icon="el-icon-printer" style="float: right;margin: 0 0 10px 0" size="mini" type="success" @click="downExcel" >导出数据</el-button></div>-->
    <analyse-online-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "['user_id', 'chn']" :min-width = "160" size="small" @sort-change="sortChange"/>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-line :data="chartData.chartData1" :colors="ChartColors"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData2" />
      </el-col>
    </el-row>
    <el-row :gutter="24" class="m-10" >
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData3" :colors="ChartColors" :extend="chartExtend"/>
      </el-col>
      <el-col :span="12" class="block">
        <ve-histogram :data="chartData.chartData4"/>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { yesterday } from '@/model/DateRange'
import { withdrawAnalysis } from '@/api/table'
import mixins from '@/model/mixins'
import mixinsFrom from '@/model/mixinsFrom'

export default {
  name: 'Play',
  mixins: [mixinsFrom, mixins],
  data() {
    return {
      chartData: {
        chartData1: {
          columns: ['day', 'withdraw_success_rate'],
          rows: []
        },
        chartData2: {
          columns: ['day', 'price_per_withdraw', 'average_withdraw_price'],
          rows: []
        },
        chartData3: {
          columns: ['day', 'alipay_withdraw_user', 'unionagency_withdraw_user'],
          rows: []
        },
        chartData4: {
          columns: ['day', 'alipay_withdraw', 'unionagency_withdraw'],
          rows: []
        }
      },
      queryFrom: {
        interval_type: 'day',
        target_time: yesterday
      },
      API: withdrawAnalysis
    }
  },
  watch: {
    tableData() {
      const chartFrom = this.tableData.slice(0, this.tableData.length - 2)
      this.chartData.chartData1.rows = chartFrom
      this.chartData.chartData2.rows = chartFrom
      this.chartData.chartData3.rows = chartFrom
      this.chartData.chartData4.rows = chartFrom
      this.chartData = this.pie(this.chartData, this.key_mapper)
    }
  },
  methods: {
    change(data) {
      this.getData(data)
    }
  }
}
</script>
